<template>
  <div>
    <div class="pageCard">
      <a-form layout="inline" :model="formSearch">
        <a-form-item style="width: 30%">
          <a-select
            allowClear
            style="width: 100%"
            v-model:value="formSearch.wasteClassifyCode"
            placeholder="请选择医废类型"
          >
            <a-select-option
              v-for="item in wasteClassifyCodeList"
              :key="item.code"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 30%">
          <a-select
            allowClear
            style="width: 100%"
            v-model:value="formSearch.status"
            placeholder="请选择状态"
          >
            <a-select-option
              v-for="item in statusList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 30%">
          <a-select
            allowClear
            style="width: 100%"
            v-model:value="formSearch.hospitalPlaceId"
            placeholder="请选择暂存点"
          >
            <a-select-option
              v-for="item in hospitalPlaceList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 30%; margin-top: 20px">
          <a-select
            allowClear
            style="width: 100%"
            v-model:value="formSearch.hospitalDepartId"
            placeholder="请选择所属科室"
          >
            <a-select-option
              v-for="item in departmentList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 30%; margin-top: 20px">
          <a-select
            allowClear
            style="width: 100%"
            v-model:value="formSearch.hospitalBaseId"
            placeholder="请选择医院名称"
          >
            <a-select-option
              v-for="item in hospitalBaseList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 30%; margin-top: 20px">
          <a-range-picker 
          style="width:100%"
            :locale="locale"
            v-model:value="formSearch.time"
            :valueFormat="valueFormat"
          />
        </a-form-item>

        <a-form-item style="width: 30%; margin-top: 20px">
          <a-input
            placeholder="请输入医废编号/集装箱编号/人员姓名/出库单号"
            v-model:value="formSearch.keyWord"
          ></a-input>
        </a-form-item>

        <a-form-item style="margin-top: 20px">
          <a-button type="primary" @click="handleGetDataList">查询</a-button>
        </a-form-item>
        <a-form-item style="margin-top: 20px">
          <a-button @click="toresetFields">重置</a-button>
        </a-form-item>
      </a-form>
    </div>

    <div>
      <a-table
        :pagination="pagination"
        :columns="columns"
        :data-source="tabledata"
        :scroll="{ x: 1500 }"
      >
        <template #status="{ record }">
          <a>{{ filterState(record.status) }}</a>
        </template>
        <template #action="{ record }">
          <a-button type="link" @click="lookDetail(record)">查看</a-button>
          <a-button type="link" @click="lookYFLabel(record)">医废标签</a-button>
        </template>
      </a-table>
    </div>
    <WasteLabel ref="WasteLabel"></WasteLabel>
    <DetailInfo ref="DetailInfo"></DetailInfo>
  </div>
</template>
<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import WasteLabel from "./components/wasteLabel";
import DetailInfo from "./components/details.vue";
import * as medicalWasteApi from "@/api/medicalWaste";
import * as hospitalApi from "@/api/hospital";
import * as Utils from "@/utils";
import * as hospitalPlaceAPi from "@/api/hospitalPlace.js";
import { hospitalDepartList } from "@/api/hospitalDepart";
import { defineComponent, onMounted, reactive, ref, toRef, toRefs } from "vue";
import { Form } from "ant-design-vue";
const valueFormat = "YYYY-MM-DD";
// 状态
const statusList = [
  // normal：正常使用 unused 未使用
  {
    label: "全部",
    value: "",
  },
  {
    label: "收集",
    value: "do_collect",
  },
  {
    label: "入库",
    value: "in_depot",
  },
  {
    label: "出库",
    value: "out_depot",
  },
];
const useForm = Form.useForm;
const columns = [
  {
    title: "医废编号",
    dataIndex: "code",
    width: 160,
    key: "code",
  },
  {
    title: "医院名称",
    width: 180,
    dataIndex: "hospitalBaseName",
    key: "hospitalBaseName",
  },
  {
    title: "科室",
    width: 180,
    dataIndex: "hospitalDepartName",
    key: "hospitalDepartName",
  },
  {
    title: "医废暂存点",
    width: 120,
    dataIndex: "hospitalPlaceName",
    key: "hospitalPlaceName",
  },
  {
    title: "医废类型",
    width: 100,
    dataIndex: "wasteClassifyName",
    key: "wasteClassifyName",
  },
  {
    title: "收集人",
    width: 100,
    dataIndex: "collectUserStaffName",
    key: "collectUserStaffName",
  },
  {
    title: "科室交接人",
    width: 130,
    dataIndex: "handUserStaffName",
    key: "handUserStaffName",
  },
  {
    title: "处置公司人员",
    width: 130,
    dataIndex: "userRevicerName",
    key: "userRevicerName",
  },
  {
    title: "状态",
    width: 100,
    dataIndex: "status",
    key: "status",
    slots: { customRender: "status" },
  },
  {
    title: "集装箱编号",
    width: 120,
    dataIndex: "wasteBoxCode",
    key: "wasteBoxCode",
  },
  {
    title: "出库单号",
    width: 180,
    dataIndex: "ckCode",
    key: "ckCode",
  },
  {
    title: "操作",
    key: "action",
    fixed: "right",
    width: 200,
    slots: { customRender: "action" },
  },
];
export default {
  components: {
    WasteLabel,
    DetailInfo,
  },
  setup() {
    const pageSize = ref(10);
    const pageIndex = ref(1);
    const yflx = reactive({
      wasteClassifyCodeList: [],
    });
    const formSearch = reactive({
      wasteClassifyCode: null,
      status: null,
      hospitalPlaceId: null,
      hospitalDepartId: null,
      keyWord: null,
      time: null,
      hospitalBaseId:null,
    });

    const tableDataref = reactive({
      tabledata: [],
      total: 0,
    });

    //暂存点列表
    const zcd = reactive({
      hospitalPlaceList: [],
    });
    // 科室列表
    const ks = reactive({
      departmentList: [],
    });

    // 过滤状态
    const filterState = (val) => {
      if (!val) return "";
      switch (val) {
        // do_collect：收集，in_depot：入库，out_depot：出库
        case "do_collect":
          return "收集";
        case "in_depot":
          return "入库";
        case "out_depot":
          return "出库";
      }
    };

    const { resetFields } = useForm(formSearch);
    // 重置查询表单
    const toresetFields = () => {
      resetFields();
    };
    // 医院列表
    const yyList = reactive({
      hospitalBaseList: [],
    });

 //获取医院列表数据
    const handleGetDataListHospital=()=>{
      hospitalApi
        .hospitalGetList({
          showAll: true,
          name: "",
          roleId: "",
          addressCode: [],
          code: "",
          pageIndex: 1,
          pageSize: 999,
        })
        .then((res) => {
          if (res && res.success) {
            yyList.hospitalBaseList = res.data;
          }
        });
    }
    // 获取暂存点
    const handleGetHospitalPlaceList = () => {
      hospitalPlaceAPi.hospitalPlaceList({ isPage: false }).then((res) => {
        if (res && res.success) {
          zcd.hospitalPlaceList = res.data;
        }
      })
    }
    //获取医废类型字典
    const handleGetListByType = () => {
      medicalWasteApi.getListByType().then((res) => {
        if (res && res.success) {
          yflx.wasteClassifyCodeList = res.data;
        }
      });
    };

    //获取科室列表
    const handleGetDepartList = () => {
      hospitalDepartList({ isPage: false }).then((res) => {
        if (res && res.success) {
          let departmentList = res.data.map((item) => {
            item.label = item.name;
            return item;
          });
          ks.departmentList = Utils.treeDataTranslate(departmentList);
        }
      });
    };
    const pagination = reactive({
      total: 0,
      pageSize: pageSize.value, // 默认每页显示数量
      showSizeChanger: true, // 显示可改变每页数量
      pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
      showTotal: (total) => `总数 ${total}条数据`, // 显示总数
      onChange: (page, size) => {
        onPageChange(page, size);
      }, // 改变每页数量时更新显示
      onShowSizeChange: (current, size) => {
        onSizeChange(current, size);
      },
    });
    // 分页
    const onSizeChange = (current, size) => {
      pageIndex.value = 1;
      pageSize.value = size;
      handleGetDataList();
    };
    const onPageChange = (current, size) => {
      pageIndex.value = current;
      handleGetDataList();
    };
    //获取列表数据
    const handleGetDataList = () => {
      let params = {
        ...formSearch,
        pageIndex: pageIndex.value || 1,
        pageSize: pageSize.value || 10,
      };
      params.createTimeStart = formSearch.time ? formSearch.time[0] : "";
      params.createTimeEnd = formSearch.time ? formSearch.time[1] : "";
      delete params.time;
      medicalWasteApi.wasteBaseGetList(params).then((res) => {
        if (res && res.success) {
          tableDataref.tabledata = res.data;
          pagination.total = res.total;
        }
      });
    };
    const WasteLabel = ref();
    const DetailInfo = ref();
    // 医废标签
    const lookYFLabel = (row) => {
      console.log(WasteLabel);
      WasteLabel.value.showModal(row);
    };
    // const DetailInfo = ref()
    // 查看
    const lookDetail = (row) => {
      console.log(DetailInfo);
      DetailInfo.value.openModal(row);
    };
    onMounted(() => {
      handleGetListByType();
      handleGetHospitalPlaceList();
      handleGetDataListHospital();
      handleGetDepartList();
      handleGetDataList();
    });
    return {
      valueFormat,
      ...toRefs(yflx),
      ...toRefs(zcd),
      ...toRefs(yyList),
      ...toRefs(ks),
      statusList,
      formSearch,
      handleGetListByType,

      toresetFields,
      ...toRefs(tableDataref),
      columns,
      pagination,
      handleGetDataList,
      filterState,

      WasteLabel,
      DetailInfo,
      lookYFLabel,
      lookDetail,

      locale,
    };
  },
};
</script>